doctype html
//- 使用表达式
- var authenticated = true 
body(class=authenticated ? 'authed': 'anon')
//- 单个属性
a(href='//google.com') Google
|
|
a(class='button' href='//google.com') Google
|
|
a(class='button', href='//google.com') Google

//- 多个属性
input(type='text', name='email', placeholder='Email')

//- 模板字符串
input(data-json=`{
  "very-long": "piece of",
  "data": true
}`)

div(class='div-class', (click)='play()')

//- 属性插值
- let url = 'pug-test.html'
a(href='/' + url) Link 
|
|
- url = 'https://example.com/'
a(href=url) Another link
- const btnType = 'info'
- const btnSize = 'lg'
button(type='button', class=`btn btn-${btnType} btn-${btnSize}`) Click me

//- 未转义的属性
//- 默认情况下，所有属性都会被转义(特殊字符替换为转义序列，以防止攻击（例如跨站点脚本）)
//- 如果需要特殊字符，使用 !=
div(escaped='<code>')
div(unescaped!='<code>')


//- style属性
a(style="color: 'red'; background: 'green'")
a(style={color: 'red', background: 'green'})

//- class属性
- const classes = ['foo', 'bar', 'baz']
a(class=classes)
|
|
a.bang(class=classes class=['bing'])

//- 类
//- 类可以使用 .classname 语法定义：
a.button
//- div 是标签的厂家爱你选择，因此如果省略标签名称，它就是默认值：
.content

//- id
a#main-link
#content